<template >
  <van-row >
    <van-row>
      <van-col span="24" style="height: 46px;">
        <van-nav-bar fixed >
          <van-icon name="arrow-left" slot="left" size="34px" color="#101010" @click="onClickLeft"></van-icon>
          <span slot="title" style="font-size: 18px">动作库</span>
          <van-icon name="search" slot="right" size="20" color="#101010" @click="onClickRight"></van-icon>
        </van-nav-bar>
      </van-col>
    </van-row>
    <van-row class="list">
      <van-row type="flex" justify="space-around" >
        <van-col span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>胸部</h2>
            <p>30个动作</p>
          </div>
        </van-col>
        <van-col span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>背部</h2>
            <p>23个动作</p>
          </div>
        </van-col>
        <van-col span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>肩膀</h2>
            <p>26个动作</p>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>手臂</h2>
            <p>222</p>
          </div>
        </van-col>
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>腿部</h2>
            <p>222</p>
          </div>
        </van-col>
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>臀部</h2>
            <p>222</p>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>腹部</h2>
            <p>222</p>
          </div>
        </van-col>
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>全身</h2>
            <p>222</p>
          </div>
        </van-col>
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>拉伸</h2>
            <p>222</p>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col to="" span="6" tag="div" class="list-box">
          <div class="list-name">
            <h2>全部</h2>
            <p>222</p>
          </div>
        </van-col>
        <van-col style="width: 116px">

        </van-col>
        <van-col style="width: 116px">

        </van-col>
      </van-row>
    </van-row>
  </van-row>
</template>

<script>
export default {
  name:'activek',
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      this.$router.push('/search')
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style scoped>

  .list-box{
  height: 116px;width:116px;position: relative; background: white;
    margin-top: 6px;border: 1px solid #eeeeee;
  }
  .list{
    box-sizing: border-box;
  }
  .list-name{
    position: absolute;top:41px;width: 116px;text-align: center;
  }
  .list-name h2{
    font-size: 14px; font-weight: normal;
  }
</style>
